<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<base href="<%=basePath%>"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>财务记录</title>
		<script src="res/js/jquery-2.1.4.min.js" type="text/javascript" ></script>
		<link rel="stylesheet" href="res/layui/css/layui.css">
		<script src="res/layui/layui.js"></script>
		<style type="text/css">
			
			#top {
				text-align: center;
				margin: 20px;
			}
			
			#left {
				float: left;
				width: 50%;
				height: 100px;
			}
			
			#right {
				float: left;
				width: 50%;
				height: 100px;
			}
			
		</style>
	</head>
	<body>
		<div id="top">
			<i class="layui-icon" style="font-size: 40px; color:orange ;">&#xe65e;</i>
		</div>
		
		<div id="left">
			<div style="width: 90%">
				<div>
					<div style="display: inline;margin: 8px;">
						<i style="font-size: 16px; color:#009688;">收入记录</i>
					</div>
				    <div class="layui-inline" style="width: 100px">
				    	<input type="text" class="layui-input" id="inStartTime" placeholder="开始时间">
				    </div>
				    <div class="layui-inline" style="width: 100px">
				    	<input type="text" class="layui-input" id="inEndTime" placeholder="结束时间">
				    </div>
				    <button class="layui-btn" onclick="inRenderDate()">搜索</button>
				</div>
				<table class="layui-table" lay-data="{height:332, url:'finance/showFinancialIn.action',method: 'post', page:true, id:'in', size:'sm'}" lay-filter="demo">
				    <thead>
				    	<tr>
						    <th lay-data="{field:'optime', width:150,templet:'#time' }">时间</th>
						    <th lay-data="{field:'in_money', width:110, sort: true,style:'background-color: #009688; color: #fff;'}">收入金额</th>
						    <th lay-data="{field:'in_remark', width:90}">备注</th>
				   		</tr>
				    </thead>
				</table>
			</div>
		</div>
		
		<div id="right">
			<div style="width: 90%">
				<div> 
					<div style="display: inline;margin: 8px;">
						<i style="font-size: 16px; color:#FF5722;">支出记录</i>
					</div>
				    <div class="layui-inline" style="width: 100px">
				    	<input type="text" class="layui-input" id="outStartTime" placeholder="开始时间">
				    </div>
				    <div class="layui-inline" style="width: 100px">
				    	<input type="text" class="layui-input" id="outEndTime" placeholder="结束时间">
				    </div>
				    <button class="layui-btn" onclick="outRenderDate()">搜索</button>
				</div>
				<table class="layui-table" lay-data="{height:332, url:'finance/showFinancialOut.action',method: 'post', page:true, id:'out', size:'sm'}" lay-filter="demo">
				    <thead>
				    	<tr>
						    <th lay-data="{field:'optime', width:150,templet:'#time' }">时间</th>
						    <th lay-data="{field:'out_money', width:110, sort: true,style:'background-color: #FF5722; color: #fff;'}">支出金额</th>
						    <th lay-data="{field:'out_remark', width:90}">备注</th>
				   		</tr> 
				    </thead>
				</table>
			</div>
		</div>
	</body>
	
	<script type="text/text" id="time">
		{{ (new Date(d.optime)).Format("yyyy-MM-dd hh:mm:ss") }} 
	</script>
	
	<script type="text/javascript">
		
		$(function(){
			$.post("finance/showYE.action",null,function(Qian){
				$("#top").children().append(Qian+'元');
			});
		});
		
		function outRenderDate(){
			table.reload('out', {
				where: { 
					"startTime":$("#outStartTime").val(),
					"endTime":$("#outEndTime").val()==""?"2099-12-31 ":$("#outEndTime").val()+" 23:59:59"
				}
			});
		}
		
		function inRenderDate(){
			table.reload('in', {
				where: {
					"startTime":$("#inStartTime").val(),
					"endTime":$("#inEndTime").val()==""?"2099-12-31":$("#inEndTime").val()+" 23:59:59"
				}
			});
		}
		
	</script>
	
	<script>
		var table; 
		layui.use(['table','laydate'], function(){
			table = layui.table;
			var laydate = layui.laydate;
		 	//选中后的回调
		  	var inStartTime = laydate.render({
			    elem: '#inStartTime',
			    done: function(value, date){
			    	if(value!=''){
			    		inEndTime.config.min.year = date.year;
			    		inEndTime.config.min.month = date.month - 1;
			    		inEndTime.config.min.date = date.date;
					}else{
						inEndTime.config.min.year = '1900';
						inEndTime.config.min.month = '01';
						inEndTime.config.min.date = '01';
					}
			    }
		    });
		 	
		 	var inEndTime = laydate.render({
		 		elem: '#inEndTime',
		 		done: function(value, date){
		 			if(value!=''){
		 				inStartTime.config.max.year = date.year;
		 				inStartTime.config.max.month = date.month - 1;
		 				inStartTime.config.max.date = date.date;
					}else{
						inStartTime.config.max.year = '2099';
						inStartTime.config.max.month = '12';
						inStartTime.config.max.date = '31';
					}
		 		}
		 	});
		 	
		 	var outStartTime = laydate.render({
		 		elem: '#outStartTime',
		 		done: function(value, date){
		 			if(value!=''){
		 				outEndTime.config.min.year = date.year;
		 				outEndTime.config.min.month = date.month - 1;
		 				outEndTime.config.min.date = date.date;
					}else{
						outEndTime.config.min.year = '1900';
						outEndTime.config.min.month = '01';
						outEndTime.config.min.date = '01';
					}
		 		}
		 	});
		 	
		 	var outEndTime = laydate.render({
		 		elem: '#outEndTime',
		 		done: function(value, date){
		 			if(value!=''){
		 				outStartTime.config.max.year = date.year;
		 				outStartTime.config.max.month = date.month - 1;
		 				outStartTime.config.max.date = date.date;
					}else{
						outStartTime.config.max.year = '2099';
						outStartTime.config.max.month = '12';
						outStartTime.config.max.date = '31';
					}
		 		}
		 	});
	  
			$('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			});
		});
	</script>
	<script type="text/javascript">
		/**
			格式化日期
		*/
		Date.prototype.Format = function (fmt) { //author: meizz 
		    var o = {
		        "M+": this.getMonth() + 1, //月份 
		        "d+": this.getDate(), //日 
		        "h+": this.getHours(), //小时 
		        "m+": this.getMinutes(), //分 
		        "s+": this.getSeconds(), //秒 
		        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
		        "S": this.getMilliseconds() //毫秒 
		    };
		    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		    for (var k in o)
		    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		    return fmt;
		} 
	</script>
</html>